<template>
	<view class="my_minHeight">
		<z-paging ref="paging" auto v-model="listData" @query="getData">
			<view class="clientInfo_container">
				<view class="content">
					<view :style="{backgroundColor: item.orderType==1?'#0caf74':'#81C215'}"
						class="d-flex flex-column j-sb content_item w100p mb15" v-for="item in listData" :key="item.orderCode"
						@click="goDetailsPage(item)">
						<view class="d-flex a-center j-sb mb15">
							<view class="title">{{orderType[item.orderType]}}</view>
							<view class="value_item">{{item.createTime}}</view>
						</view>
						<view class="d-flex j-sb">
							<view class="d-flex">
								<view class="mr10">
									<u--image :showLoading="true" :src="item.orderType==1?BASE_URL+'/upload/c2.png':BASE_URL+'/upload/c1.png'"
										width="116rpx" height="116rpx"></u--image>
								</view>
								<view class="d-flex flex-column j-sb">
									<view class="title_item">{{item.orderCode}}</view>
									<view class="value_item">实付总额：{{item.realAmount || praseStrEmpty}}</view>
									<view class="value_item">所属客户：{{item.customerName || praseStrEmpty}}</view>
								</view>
							</view>
							<view class="tcje my_center">+{{item.commissionAmount}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		queryPageByPlatformApp
	} from "@/api/index.js"
	import {
		BASE_URL
	} from "@/utils/common.js"

	export default {
		components: {},
		data() {
			return {
				BASE_URL: BASE_URL,
				userInfo: uni.getStorageSync('housekeeperInfo'),
				listData: [],
				orderType: ['预约单', '在线支付', '门店订单']
			};
		},
		onLoad() {},
		onShow() {},
		methods: {
			getData(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryPageByPlatformApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					houseKeeperCode: this.userInfo.housekeeperCode,
				}).then(res => {
					this.$refs.paging.complete(res.object.data);
					uni.hideLoading()
				})
			},
			goDetailsPage(data) {
				uni.navigateTo({
					url: "/pages/commission/details?orderCode=" + data.orderCode
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.my_minHeight {
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
	}

	.clientInfo_container {
		box-sizing: border-box;
		padding: 30rpx 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				// background-color: #0caf74;
				padding: 30rpx;

				.title {
					color: #ffffff;
					font-size: 34rpx;
					font-weight: 600;
				}

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #38d19a;
					border-radius: 3px;
				}

				.title_item {
					font-size: 24rpx;
					color: #ffffff;
				}

				.value_item {
					font-size: 24rpx;
					color: #ffffff;
				}

				.tcje {
					font-family: Impact, Impact-400;
					font-size: 42rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>